<template>
	<div>
		<el-descriptions
			v-if="isShowComponent"
			:title="title"
			:column="columns"
			:border="isShowBorder"
			:size="size"
			:colon="colon"
			:direction="directions"
			:style="{ color: titleColor }"
		>
			<el-descriptions-item
				v-for="(item, index) in descriptionItemList"
				:label="item.label"
				:key="index"
			>
				<span :style="{ color: item.activeColor }">
					{{ item.text || '-' }}
				</span>
			</el-descriptions-item>
		</el-descriptions>
	</div>
</template>
<script>
export default {
	name: 'CardDescriptionItem',
	props: {
		title: {
			type: String,
			default: ''
		},
		titleColor: {
			type: String,
			default: '#303133'
		},
		columns: {
			type: Number,
			default: 3
		},
		isShowBorder: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: 'small '
		},
		colon: {
			type: Boolean,
			default: true
		},
		directions: {
			type: String,
			default: 'vertical'
		},
		isShowComponent: {
			type: Boolean,
			default: true
		},
		descriptionItemList: {
			type: Array,
			default: () => []
		}
	}
}
</script>
<style lang="scss" scoped></style>
